<?php
$this->template->add_admin_js_lib("jquery.nestable.js");
?>

<div class="container-fluid">

<div class="col-12 col-sm-6">
	<form method="post" action="<?php echo $this->url_index . @$menu->{$this->_model->primaryKey}; ?>"  enctype="multipart/form-data" class="form-horizontal">
	<div class="widget-box">
		<div class="widget-title">
			<span class="icon">
				<i class="glyphicon glyphicon-list-alt"></i>
			</span>	
			<h5>Chọn menu cha</h5>
		</div>
		
		<div class="widget-content nopadding">
			
			<?php echo $this->atheme->group_select2('menu','Chọn menu để sửa','','', $parents,@$menu,' '); ?>	
			<div class="form-actions">
				<button type="submit" class="btn btn-primary btn-small">
					Select
				</button> 
				or 
				<a class="text-danger" href="<?php echo $this->url_index;?>">Cancel</a>
			</div>
			
			
		</div>
	</div>
	</form> <!-- end of select menu form -->
</div>
<?php if (@$menu)  { ?>
<form method="post" action="<?php echo $this->url_edit . @$menu->{$this->_model->primaryKey}; ?>"  enctype="multipart/form-data" class="form-horizontal">

<div class="col-12 col-sm-6">
	
	<div class="widget-box">
		<div class="widget-title">
			<span class="icon">
				<i class="glyphicon glyphicon-list-alt"></i>
			</span>	
			<h5><?php echo ((@$edit->{$this->_model->primaryKey} > 0)?'Chỉnh sửa ':'Thêm mới ').@strtolower($this->resource->RES_NAME);?></h5>
		</div>
		
		<div class="widget-content nopadding">
			
			<?php echo $this->atheme->group_input2('edit[men_name]', 'Tên menu', '', 'span6 ', @$edit->men_name, 'text', ''); ?>
			
			<?php if (@$edit->men_parent > 0)echo $this->atheme->group_select2('edit[men_type]','Loại menu','','', $this->_model->type,@$edit->men_type,''); ?>
	
			<?php //echo $this->atheme->group_select2('edit[men_parent]','Menu cha','','', $parents,@$edit->men_parent,' '); ?>	
	
			<?php echo $this->atheme->group_select2('edit[men_status]','Trạng thái','','', array('1'=>'Sử dụng','0'=>'Ẩn'),@$edit->men_status); ?>
			
			<div class="form-actions">
				<button type="submit" class="btn btn-primary btn-small">
					<?php echo ((@$edit->{$this->_model->primaryKey} > 0)?'Save':'Add');?>
				</button> 
				or 
				<a class="text-danger" href="<?php echo $this->url_index;?>">Cancel</a>
			</div>
			
			
		</div>
	</div>
		
</div>

<div class="col-12 col-sm-6">
	
	<div class="accordion-group widget-box">
		<div class="accordion-heading">
			<div class="widget-title">
				<a data-parent="#collapse-group" href="#collapseGTwo" data-toggle="collapse">
					<span class="icon"><i class="glyphicon glyphicon-magnet"></i></span><h5>Liên kết</h5>
				</a>
			</div>
		</div>
		<div class="collapse accordion-body" id="collapseGTwo">
			<div class="widget-content">
				
			<?php echo $this->atheme->group_input2('_link', 'Đường dẫn liên kết', '_link', 'span6 ', @$edit->cat_name, 'text', ' placeholder="http://"'); ?>
			<?php echo $this->atheme->group_input2('_linkname', 'Tên liên kết', '_linkname', 'span6 ', @$edit->cat_name, 'text', 'required'); ?>
			
			<div class="form-actions">
				<button type="button" class="btn btn-primary btn-small " id="add_url">
					Thêm vào menu
				</button> 
			</div>
			</div>
		</div>
	</div>
	
	
</div>


<div class="col-12 col-sm-6"">
	
	<div class="widget-box">
		<div class="widget-title">
			<span class="icon">
				<i class="glyphicon glyphicon-list-alt"></i>
			</span>	
			<h5>Thành phần</h5>
		</div>
		
		<div class="widget-content nopadding">
			<div class="cf nestable-lists">
				
				<div class="dd" id="nestable">
					<ol class="dd-list">
						<li class="dd-item" data-id="1">
							<div class="dd-handle">Item 1</div>
						</li>
						<li class="dd-item" data-id="2">
							<div class="dd-handle">Item 2</div>
							<ol class="dd-list">
								<li class="dd-item" data-id="3"><div class="dd-handle">Item 3</div></li>
								<li class="dd-item" data-id="4"><div class="dd-handle">Item 4</div></li>
								<li class="dd-item" data-id="5">
									<div class="dd-handle">Item 5</div>
									<ol class="dd-list">
										<li class="dd-item" data-id="6"><div class="dd-handle">Item 6</div></li>
										<li class="dd-item" data-id="7"><div class="dd-handle">Item 7</div></li>
										<li class="dd-item" data-id="8"><div class="dd-handle">Item 8</div></li>
									</ol>
								</li>
								<li class="dd-item" data-id="9"><div class="dd-handle">Item 9</div></li>
								<li class="dd-item" data-id="10"><div class="dd-handle">Item 10</div></li>
							</ol>
						</li>
						<li class="dd-item" data-id="11">
							<div class="dd-handle">Item 11</div>
						</li>
						<li class="dd-item" data-id="12">
							<div class="dd-handle">Item 12</div>
						</li>
					</ol>
				</div>
				
				
			</div>
			 
			
			<div class="form-actions">
				<button type="submit" class="btn btn-primary btn-small">
					<?php echo ((@$edit->{$this->_model->primaryKey} > 0)?'Save':'Add');?>
				</button> 
				or 
				<a class="text-danger" href="<?php echo $this->url_index;?>">Cancel</a>
			</div>
			
		</div>
	</div>
		
</div>
</form> <!-- end of edit form -->
<?php 
} //end of if has $menu
 ?>


</div>

<script type="text/javascript">
$(function (){
	
	$('#add_url').click(function (){
		var link = $('#_link').val();
		var name = $('#_linkname').val();
		var url_add_menu  = '<?php echo admin_url(); ?>menu/add_url/<?php echo @$menu;?>';
		$.post (url_add_menu, {
			'men_name': name,
			'men_type': 'url',
			'men_link': link,
		}, function (re){
			console.log(re);
		})
	});
});
</script>
<script>
	var group = $("ul.serialization").sortable({
		group: 'serialization',
		//delay: 500,
		onDrop: function (item, container, _super) {
			 var data = group.sortable("serialize").get();
			
			 var jsonString = JSON.stringify(data, null, ' ');
			console.log(data);
		//	$('#serialize_output2').text(jsonString);
			_super(item, container)
		}
	});
</script>


<script type="text/javascript">
$(function (){
	
	$('#add_url').click(function (){
		var link = $('#_link').val();
		var name = $('#_linkname').val();
		var url_add_menu  = '<?php echo admin_url(); ?>menu/add_url/<?php echo @$menu;?>';
		$.post (url_add_menu, {
			'men_name': name,
			'men_type': 'url',
			'men_link': link,
		}, function (re){
			console.log(re);
		})
	});
});
</script>
<script>
	var group = $("ul.serialization").sortable({
		group: 'serialization',
		//delay: 500,
		onDrop: function (item, container, _super) {
			 var data = group.sortable("serialize").get();
			
			 var jsonString = JSON.stringify(data, null, ' ');
			console.log(data);
		//	$('#serialize_output2').text(jsonString);
			_super(item, container)
		}
	});
</script>
<textarea id="nestable-output"></textarea>

<style type="text/css">

.cf:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.dd { position: relative; display: block; margin: 0; padding: 0; max-width: 600px; list-style: none; font-size: 13px; line-height: 20px; margin: 0px 10px;}

.dd-list { display: block; position: relative; margin: 0; padding: 0; list-style: none; }
.dd-list .dd-list { padding-left: 30px; }
.dd-collapsed .dd-list { display: none; }

.dd-item,
.dd-empty,
.dd-placeholder { display: block; position: relative; margin: 0; padding: 0; min-height: 20px; font-size: 13px; line-height: 20px; }

.dd-handle { display: block; height: 30px; margin: 5px 0; padding: 5px 10px; color: #333; text-decoration: none; font-weight: bold; border: 1px solid #ccc;
    background: #fafafa;
    background: -webkit-linear-gradient(top, #fafafa 0%, #eee 100%);
    background:    -moz-linear-gradient(top, #fafafa 0%, #eee 100%);
    background:         linear-gradient(top, #fafafa 0%, #eee 100%);
    -webkit-border-radius: 3px;
            border-radius: 3px;
    box-sizing: border-box; -moz-box-sizing: border-box;
}
.dd-handle:hover { color: #2ea8e5; background: #fff; }

.dd-item > button { display: block; position: relative; cursor: pointer; float: left; width: 25px; height: 20px; margin: 5px 0; padding: 0; text-indent: 100%; white-space: nowrap; overflow: hidden; border: 0; background: transparent; font-size: 12px; line-height: 1; text-align: center; font-weight: bold; }
.dd-item > button:before { content: '+'; display: block; position: absolute; width: 100%; text-align: center; text-indent: 0; }
.dd-item > button[data-action="collapse"]:before { content: '-'; }

.dd-placeholder,
.dd-empty { margin: 5px 0; padding: 0; min-height: 30px; background: #f2fbff; border: 1px dashed #b6bcbf; box-sizing: border-box; -moz-box-sizing: border-box; }
.dd-empty { border: 1px dashed #bbb; min-height: 100px; background-color: #e5e5e5;
    background-image: -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), 
                      -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
    background-image:    -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), 
                         -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
    background-image:         linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), 
                              linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
    background-size: 60px 60px;
    background-position: 0 0, 30px 30px;
}

.dd-dragel { position: absolute; pointer-events: none; z-index: 9999; }
.dd-dragel > .dd-item .dd-handle { margin-top: 0; }
.dd-dragel .dd-handle {
    -webkit-box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1);
            box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1);
}

/**
 * Nestable Extras
 */

.nestable-lists { display: block; clear: both; padding: 30px 0; width: 100%; border: 0; border-top: 2px solid #ddd; border-bottom: 2px solid #ddd; }

#nestable-menu { padding: 0; margin: 20px 0; }

#nestable-output,
#nestable2-output { width: 100%; height: 7em; font-size: 0.75em; line-height: 1.333333em; font-family: Consolas, monospace; padding: 5px; box-sizing: border-box; -moz-box-sizing: border-box; }

#nestable2 .dd-handle {
    color: #fff;
    border: 1px solid #999;
    background: #bbb;
    background: -webkit-linear-gradient(top, #bbb 0%, #999 100%);
    background:    -moz-linear-gradient(top, #bbb 0%, #999 100%);
    background:         linear-gradient(top, #bbb 0%, #999 100%);
}
#nestable2 .dd-handle:hover { background: #bbb; }
#nestable2 .dd-item > button:before { color: #fff; }

@media only screen and (min-width: 700px) { 

    .dd { float: left; width: 90%; }
    .dd + .dd { margin-left: 2%; }

}

.dd-hover > .dd-handle { background: #2ea8e5 !important; }

/**
 * Nestable Draggable Handles
 */

.dd3-content { display: block; height: 30px; margin: 5px 0; padding: 5px 10px 5px 40px; color: #333; text-decoration: none; font-weight: bold; border: 1px solid #ccc;
    background: #fafafa;
    background: -webkit-linear-gradient(top, #fafafa 0%, #eee 100%);
    background:    -moz-linear-gradient(top, #fafafa 0%, #eee 100%);
    background:         linear-gradient(top, #fafafa 0%, #eee 100%);
    -webkit-border-radius: 3px;
            border-radius: 3px;
    box-sizing: border-box; -moz-box-sizing: border-box;
}
.dd3-content:hover { color: #2ea8e5; background: #fff; }

.dd-dragel > .dd3-item > .dd3-content { margin: 0; }

.dd3-item > button { margin-left: 30px; }

.dd3-handle { position: absolute; margin: 0; left: 0; top: 0; cursor: pointer; width: 30px; text-indent: 100%; white-space: nowrap; overflow: hidden;
    border: 1px solid #aaa;
    background: #ddd;
    background: -webkit-linear-gradient(top, #ddd 0%, #bbb 100%);
    background:    -moz-linear-gradient(top, #ddd 0%, #bbb 100%);
    background:         linear-gradient(top, #ddd 0%, #bbb 100%);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.dd3-handle:before { content: '≡'; display: block; position: absolute; left: 0; top: 3px; width: 100%; text-align: center; text-indent: 0; color: #fff; font-size: 20px; font-weight: normal; }
.dd3-handle:hover { background: #ddd; }

/**
 * Socialite
 */

.socialite { display: block; float: left; height: 35px; }

    </style>

 <script>

$(document).ready(function()
{

    var updateOutput = function(e)
    {
        var list   = e.length ? e : $(e.target),
            output = list.data('output');
        if (window.JSON) {
            output.val(window.JSON.stringify(list.nestable('serialize')));//, null, 2));
        } else {
            output.val('JSON browser support required for this demo.');
        }
    };

    // activate Nestable for list 1
    $('#nestable').nestable({
        group: 1
    })
    .on('change', updateOutput);
    
    // activate Nestable for list 2
    $('#nestable2').nestable({
        group: 1
    })
    .on('change', updateOutput);

    // output initial serialised data
    updateOutput($('#nestable').data('output', $('#nestable-output')));
    

    $('#nestable-menu').on('click', function(e)
    {
        var target = $(e.target),
            action = target.data('action');
        if (action === 'expand-all') {
            $('.dd').nestable('expandAll');
        }
        if (action === 'collapse-all') {
            $('.dd').nestable('collapseAll');
        }
    });

    $('#nestable3').nestable();

});
</script>